<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发表博客</title>
    <script src="/js/wangEditor.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/vue.js" type="text/javascript"></script>
    <script src="/js/axios.js" type="text/javascript"></script>
    <script src="/js/index.js"></script>
</head>
<body>
<div id="app">
    <div  th:include="common/common-nav::head"></div>

    <div style="margin-top: 60px;">

        <div style="width:1100px;display: flex;flex-direction:row;">
            <p style="width: 100px;"><b>请输入标题:</b></p>
            <div style="width: 400px;margin-right: 50px">
                <el-input type="text" placeholder="请输入内容"
                          v-model="title" maxlength="25" show-word-limit>
                </el-input>
            </div>
            <div style="width:500px;display: flex;flex-direction:row;">
                <p style="width: 150px;"><b>请选择博客分类:</b></p>
                <el-select v-model="type" placeholder="请选择文章标签">
                    <el-option v-for="item in types" :key="item.id" :label="item.type"
                               :value="item.id">
                    </el-option>
                </el-select>
            </div>

        </div>

        <div style="width:500px;display: flex;flex-direction:row;margin-top: 20px">
            <p style="width: 100px;"><b>请输入摘要:</b></p>
            <div style="width: 400px">
                <div style="margin: 20px 0;"></div>
                <el-input type="textarea" placeholder="请输入内容"
                          v-model="textarea" maxlength="50" show-word-limit>
                </el-input>
            </div>
        </div>

        <div id="editor"  class="editor" style="margin-top:50px" v-html="content.documents">
            <div v-html="content.documents">

            </div>
        </div>

        <el-button style="margin-top:20px" type="primary"  @click="handleAdd">{{but}}</el-button>

    </div>

</div>

</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            title: "标题......",
            textarea:"摘要...",
            content: {id:"",documents:""},
            editor: null,
            types:[],
            type:"",
            searchTitle:"",
            but:"发表博客"
        },
        mounted: function() {
            this.init()
            let bolg = JSON.parse(sessionStorage.getItem("blog"))
            if(bolg != null){
                this.but = "修改"
                this.type = bolg.typeId
                this.title=bolg.title
                this.textarea = bolg.digest
                let that = this
                axios.get("/api/hello/findByContextId/" + bolg.textId).then(
                    function (resp){
                        that.content = resp.data.data
                    }
                )
            }
        },
        methods: {
            init: function() {
                var E = window.wangEditor;
                this.editor = new E(document.getElementById('editor'));
                this.editor.config.uploadImgShowBase64 = true
                // 图片上传格式
                // 隐藏网络图片, 把图片转成 base 64
                this.editor.config.pasteFilterStyle = false
                // 自定义颜色
                this.editor.config.colors = ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff']
                // 配置字体
                this.editor.config.fontNames = ['宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana']
                //创建
                this.editor.create();
                // 富文本内容
                this.editor.txt.html();

                var that = this
                axios.get("/api/public/getTypeAll").then(
                    function (resp) {
                        that.types = resp.data.data
                    }
                )
            },
            handleAdd: function() {
                let that = this
                let content = {id:this.content.id,documents:this.editor.txt.html()}
                if(this.but === "修改"){
                    axios.post("/api/hello/update",content).then(
                        function (resp){
                            console.log(resp.data.data)
                            if(resp.data.data==true){
                                that.$notify({
                                    title: '修改成功',
                                    type: 'success'
                                });
                                return
                            }
                            that.$notify.error({
                                title: '修改失败',
                            });
                            sessionStorage.clear();
                        }
                    )
                    return
                }
                console.log(this.type)
                if(this.type==null || this.type==""){
                    this.$notify({
                        title: '类别不能为空',
                        type: 'warning'
                    });
                    return;
                }
                let blog = {title:this.title,digest:this.textarea,typeId:this.type}
                axios.post("/api/hello/addBlog",{blog:blog,content:content}).then(
                    function (resp) {
                    console.log(resp.data.data)
                    if(resp.data.data!=null){
                        that.$notify({
                            title: '成功',
                            message: '添加成功',
                            type: 'success'
                        });

                        return
                    }
                        that.$notify.error({
                        title: '错误',
                        message: '添加失败'
                    });
                }).catch(function (reason) {
                    that.$notify.error({
                        title: '错误',
                        message: '添加失败'
                    });
                });
            },
            findByTitle:function(){
                if(this.searchTitle==null || this.searchTitle == ""){
                    this.$notify({
                        title: '搜索不能为空',
                        type: 'warning'
                    });
                    return
                }
                sessionStorage.setItem('searchTitle',this.searchTitle)
                window.location.href = "/"
            }
        }
    })
</script>
<style>
    *{
        margin:0;
        padding:0;
    }
    a{
        text-decoration:none;
    }
</style>
</html>